<template>
    <div>
        <Card shadow :padding="16">
            <div class="search-con">
                <Input :placeholder="this.$placeholder('button_name')" class="search-input" name="name" v-model="name"></Input>
                <Button ref="demo"  type="primary" @click="showInfo">{{$t('query')}}</Button>
                <Button type="success" @click="modal1 = true">{{$t('add')}}</Button>
                <Button type="error">{{$t('delete')}}</Button>
                <ColPopTip :list="columns1" module="role" @setColumn="setColumn"></ColPopTip>
            </div>
            <Table ref="LT" :loading="loading" :height="tableHeight" stripe border :columns="filterColumns" :data="list" @on-select="select" @on-selection-change="selectionChange">

                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="show(index,row)">{{$t('edit')}}</Button>
                    <Button type="error" size="small" @click="remove(row.id)">{{$t('delete')}}</Button>
                </template>
            </Table>
            <div style="margin-top: 10px;text-align: right">
                <Page :page-size-opts="[10,20,50,100]" :total="total" @on-change="pageChange" @on-page-size-change="pageSizeChange" size="small" show-elevator show-sizer show-total />
            </div>
        </Card>

        <modal v-model="modal1" :mask-closable="false" :title="$t('editPage')">
            <Form>
                <row>
                    <FormItem :label="$t('button_name')" prop="name">
                        <Input :placeholder="this.$placeholder('button_name',0)" style="width: 200px;"></Input>
                    </FormItem>
                    <FormItem :label="$t('button_code')" prop="code">
                        <Input :placeholder="this.$placeholder('button_code')" style="width: 200px;"></Input>
                    </FormItem>
                </row>
                <FormItem :label="$t('remark')" prop="remark">
                    <Input :placeholder="this.$placeholder('remark')" style="width: 200px;"></Input>
                </FormItem>
            </Form>
        </modal>
    </div>
</template>




<script>
    import DetailModal from "../../components/detail-modal";
    import ColPopTip from '../../components/col-poptip'
    import { mixin } from '../../mixins/mixin'

    export default {
        name: "sys-button",
        mixins: [mixin],
        components: {DetailModal, ColPopTip},
        data() {
            return {
                modal1: false,
                queryUrl: 'getUserData',
                showSummary: 1,
                name: ''
            }
        },
        methods: {
            showInfo() {

            },
            ok() {

            },
            show(index, row) {
            }
        },
        computed: {
            columns1() {
                return [
                    {type: 'selection', width: 60, align: 'center'},
                    {title: this.$t('role_name'), key: 'name'},
                    {title: this.$t('remark'), key: 'remark'},
                    {title: this.$t('action'), slot: 'action', width: 150, align: 'center'}
                ]
            }
        },
        mounted() {
        }
    }
</script>

<style lang="less">


</style>
